<!DOCTYPE html>
<html lang='en' xmlns:th='http://www.thymeleaf.org'>
<head>
	<meta charset='UTF-8'>
	<title>产品列表</title>
	<link rel='stylesheet' href='../../static/css/style.css' th:href='@{http://localhost:8080/css/style.css}'>
	<link rel='stylesheet' href='../../static/layui/css/layui.css'
		  th:href='@{http://localhost:8080/layui/css/layui.css}'>
	<script src='../../static/js/jquery.js'
			th:src='@{http://localhost:8080/webjars/jquery/3.6.0/jquery.min.js}'></script>
	<script src='../../static/layui/layui.js' th:src='@{http://localhost:8080/layui/layui.js}'></script>
	<script src='../../static/js/jQuery.print.js' th:src="@{http://localhost:8080/js/jQuery.print.js}"></script>
	<link rel='stylesheet' href='../../static/css/man/product_list.css'
		  th:href='@{http://localhost:8080/css/man/product_list.css}'>
	<script src='../../static/js/man/product_list.js' th:src='@{http://localhost:8080/js/man/product_list.js}'></script>

</head>
<body>
<div id="print">
	<h1>产品列表</h1>
	<hr>
	<span>请选择订单日期 :</span>
	<input id="warehouse_id" type="date">
	<select name="warehouse_id_select" id="warehouse_id_select">
		<option value="0">请选择具体的入库订单</option>
	</select>
	<hr>
	<datalist id="supplier_data">
		<option th:each="supplier : ${suppliers}" th:text="${supplier}"></option>
		<!--/*-->
		<option>supplier_data1</option>
		<option>supplier_data2</option>
		<option>supplier_data3</option>
		<!--*/-->
	</datalist>
	<datalist id="variety_data">
		<option th:each="variety :${varieties}" th:text="${variety}"></option>
	</datalist>
	<input type="text" id="supplier_ipt" list="supplier_data" placeholder="请选择或输入供应商">
	<input type="text" id="variety_ipt" list="variety_data" placeholder="请选择或输入产品名称">
	<hr>

	<table id="product_table" class="layui-table" lay-filter="product">

	</table>

	<script type="text/html" id="bar">
		<a style="width:60px;" class=" layui-btn-danger layui-btn-xs layui-btn layui-btn-normal layui-btn-radius"
		   lay-event="del">删除</a>
	</script>
	<!-- todo: 超级管理员的开关实现  -->
	<script type="text/html" id="manager_bar">
		<div class="layui-input-block">
			<input type="checkbox" name="role" lay-skin="switch">
		</div>
	</script>

	<script>

		var tableProduct;

		$("#variety_ipt").on("change",function (){
			var variety = $(this).val();
			tableProduct.reload({
				url: '/products/findProductsForVariety/', //数据接口
				where:{variety:variety},
				pae:{curr:1}
			})
		})

		$("#supplier_ipt").on("change",function (){
			console.log($(this).val());
			var supplier = $(this).val();
			tableProduct.reload({
				url: '/products/findProductsForSupplier/', //数据接口
				where:{supplier:supplier},
				page:{curr:1}
			})
		})

		$("#warehouse_id_select").on("change", function () {
			var warehouseId = $(this).val();
			tableProduct.reload({
				url: '/products/warehouseIdList/', //数据接口
				where: {warehouseId: warehouseId},
				page: {curr: 1}
			})
		})

		layui.use('table', function () {

			var table = layui.table;

			//第一个实例
			tableProduct = table.render({
				elem: '#product_table',
				url: '/products/warehouseIdList/', //数据接口
				page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
					layout: ['prev', 'page', 'next', 'count', 'skip'] //自定义分页布局
					//,curr: 5 //设定初始在第 5 页
					, groups: 5 //只显示 1 个连续页码
					, limit: 10
				},
				cols: [
					[//表头
						{field: 'id', title: 'ID', sort: true, fixed: 'left' ,	width:'60'	}
						, {field: 'warehouseId', title: '订单编号', sort:true, 	width:'160'	}
						, {field: 'brandName', title: '品牌', edit: 'text',    	width:'120'	}
						, {field: 'varietyName', title: '品种', edit: 'text',  	width:'120'	}
						, {field: 'typeName', title: '型号', edit: 'text',     	width:'160'	}
						, {field: 'supplier', title: '供应商', edit: 'text',   	width:'250'	}
						// , {field: 'contact', title: '联系人', edit: 'text'}
						// , {field: 'telephone', title: '电话', edit: 'text'}
						, {field: 'standard', title: '规格', edit: 'text',     	width:'100'	}
						, {field: 'units', title: '单位', edit: 'text',			width:'80'	}
						, {field: 'count', title: '数量', edit: 'text',         	width:'80'	}
						, {field: 'price', title: '单价', edit: 'text', 			width:'80'	}
						, {field: 'money', title: '金额', edit: 'text',			width:'100'	}
						// , {field: 'remake', title: '备注', edit: 'text'}
						// , {field: 'role', title: '超级管理员', sort: true}
						, {title: '操作', toolbar: '#bar', align: 'center',      width:'120'	}
					]
				],
			});

			//监听单元格编辑
			table.on('edit(product)', function (obj) {
				var value = obj.value //得到修改后的值
					, data = obj.data //得到所在行所有键值
					, field = obj.field; //得到字段
				// layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
				$.ajax({
					url: "/products/update",
					method: "get",
					data: "keyStr=" + field + "&valueStr=" + value + "&id=" + data.id,
					success: function (da) {
						layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value + " =====  " + da);
					}
				})

			});

			//监听工具条
			table.on('tool(product)', function (obj) {
				var data = obj.data;
				if (obj.event === 'del') {
					layer.confirm('请确认删除当前用户.', function (index) {
						console.log(obj.data.id);
						obj.del();
						layer.close(index);
						//后台删除并响应结果
						$.ajax({
							url: "/products/del",
							method: "post",
							data: "id=" + obj.data.id,
							success: function (data) {
								//弹出删除成功提示
								if (data == "success") {
									layui.use('layer', function () {
										var layer = layui.layer;
										layer.msg('产品删除成功', {
											icon: 1,
											time: 1000,
											anim: 5
										});
									});
								}
							}
						})
					});
				} else if (obj.event === 'edit') {
					layer.alert('编辑行：<br>' + JSON.stringify(data))
				}
			});

			var $ = layui.$;

			$('#product_table .layui-btn').on('click', function () {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});


		});
	</script>



</div>
	<div style=" width: 300px;margin:50px auto 0 auto ;">
		<button class="layui-btn-lg layui-bg-green " id="submit_button">打印入库单</button>
	</div>

</body>
</html>